<template>
	<view>
		<!-- 客服聊天弹窗 -->
		<cl-popup
			v-model="visible"
			direction="center"
			:close-on-click-modal="false"
			:height="isFullScreen ? '100vh' : '80vh'"
			:width="isFullScreen ? '100vw' : '90vw'"
			:border-radius="isFullScreen ? 0 : 24"
			:padding="0"
		>
			<view class="customer-service">
				<!-- 头部 -->
				<view class="service-header">
					<view class="header-left" @tap="goBack">
						<cl-icon name="cl-icon-arrow-left" :size="40" color="#fff" />
					</view>
					<view class="header-center">
						<view class="agent-info">
							<image 
								:src="currentAgent.avatar || '/static/icon/customer-service.png'" 
								mode="aspectFill" 
								class="agent-avatar"
							/>
							<view class="agent-details">
								<text class="agent-name">{{ currentAgent.name }}</text>
								<view class="agent-status">
									<view class="status-dot" :class="{ online: currentAgent.online }"></view>
									<text class="status-text">{{ currentAgent.status }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="header-right">
						<view class="action-btn" @tap="toggleFullScreen">
							<cl-icon :name="isFullScreen ? 'cl-icon-exit-fullscreen' : 'cl-icon-fullscreen'" :size="36" color="#fff" />
						</view>
						<view class="action-btn" @tap="showMore">
							<cl-icon name="cl-icon-more" :size="36" color="#fff" />
						</view>
					</view>
				</view>

				<!-- 消息区域 -->
				<scroll-view
					class="message-area"
					scroll-y
					:scroll-top="scrollTop"
					:scroll-into-view="scrollIntoView"
					@scrolltoupper="loadMoreMessages"
				>
					<!-- 加载更多提示 -->
					<view class="load-more" v-if="showLoadMore">
						<cl-loading :size="20" />
						<text class="load-text">加载历史消息...</text>
					</view>

					<!-- 消息列表 -->
					<view class="message-list">
						<view
							v-for="(msg, index) in messages"
							:key="msg.id"
							:id="`msg-${msg.id}`"
							class="message-item"
							:class="{ 'self': msg.sender === 'user', 'system': msg.type === 'system' }"
						>
							<!-- 系统消息 -->
							<view v-if="msg.type === 'system'" class="system-message">
								<text class="system-text">{{ msg.content }}</text>
							</view>

							<!-- 普通消息 -->
							<view v-else class="normal-message">
								<!-- 时间戳 -->
								<view class="message-time" v-if="shouldShowTime(index)">
									<text class="time-text">{{ formatTime(msg.time) }}</text>
								</view>

								<!-- 消息内容 -->
								<view class="message-content">
									<!-- 头像 -->
									<image 
										v-if="msg.sender === 'agent'"
										:src="msg.avatar || currentAgent.avatar" 
										class="message-avatar"
										mode="aspectFill"
									/>

									<!-- 消息体 -->
									<view class="message-body" :class="{ typing: msg.isTyping }">
										<!-- 打字中动画 -->
										<view v-if="msg.isTyping" class="typing-indicator">
											<view class="typing-dot"></view>
											<view class="typing-dot"></view>
											<view class="typing-dot"></view>
										</view>

										<!-- 文本消息 -->
										<text v-else-if="msg.type === 'text'" class="message-text">
											{{ msg.content }}
										</text>

										<!-- 图片消息 -->
										<image
											v-else-if="msg.type === 'image'"
											:src="msg.content"
											class="message-image"
											mode="widthFix"
											@tap="previewImage(msg.content)"
										/>

										<!-- 商品卡片 -->
										<view v-else-if="msg.type === 'goods'" class="goods-card" @tap="toGoodsDetail(msg.goodsId)">
											<image :src="msg.goodsImage" class="goods-image" mode="aspectFill" />
											<view class="goods-info">
												<text class="goods-name">{{ msg.goodsName }}</text>
												<text class="goods-price">¥{{ msg.goodsPrice }}</text>
											</view>
										</view>

										<!-- 订单卡片 -->
										<view v-else-if="msg.type === 'order'" class="order-card" @tap="toOrderDetail(msg.orderId)">
											<view class="order-header">
												<text class="order-no">订单号：{{ msg.orderNo }}</text>
												<text class="order-status">{{ msg.orderStatus }}</text>
											</view>
											<view class="order-goods" v-for="item in msg.orderGoods" :key="item.id">
												<image :src="item.image" class="order-goods-image" mode="aspectFill" />
												<text class="order-goods-name">{{ item.name }}</text>
											</view>
										</view>
									</view>

									<!-- 消息状态 -->
									<view v-if="msg.sender === 'user'" class="message-status">
										<cl-icon 
											v-if="msg.status === 'sending'" 
											name="cl-icon-loading" 
											:size="24" 
											color="#999"
										/>
										<cl-icon 
											v-else-if="msg.status === 'sent'" 
											name="cl-icon-check" 
											:size="24" 
											color="#999"
										/>
										<cl-icon 
											v-else-if="msg.status === 'failed'" 
											name="cl-icon-warning" 
											:size="24" 
											color="#ff4757"
											@tap="resendMessage(msg)"
										/>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<!-- 快捷回复 -->
				<scroll-view 
					v-if="showQuickReplies" 
					class="quick-replies" 
					scroll-x
					:show-scrollbar="false"
				>
					<view class="reply-list">
						<view 
							v-for="(reply, index) in quickReplies" 
							:key="index"
							class="reply-item"
							@tap="sendQuickReply(reply)"
						>
							<text class="reply-text">{{ reply.text }}</text>
						</view>
					</view>
				</scroll-view>

				<!-- 输入区域 -->
				<view class="input-area">
					<view class="input-toolbar">
						<!-- 语音/键盘切换 -->
						<view class="tool-btn" @tap="toggleVoice">
							<cl-icon 
								:name="isVoiceMode ? 'cl-icon-keyboard' : 'cl-icon-voice'" 
								:size="48" 
								color="#666"
							/>
						</view>

						<!-- 文本输入/语音按钮 -->
						<view class="input-wrapper" v-if="!isVoiceMode">
							<cl-input
								v-model="inputText"
								type="text"
								placeholder="请输入消息..."
								confirm-type="send"
								@confirm="sendTextMessage"
								@focus="onInputFocus"
								@blur="onInputBlur"
							/>
						</view>
						<view class="voice-wrapper" v-else>
							<view 
								class="voice-btn"
								@touchstart="startVoice"
								@touchend="endVoice"
								@touchcancel="cancelVoice"
							>
								<text class="voice-text">{{ voiceText }}</text>
							</view>
						</view>

						<!-- 表情 -->
						<view class="tool-btn" @tap="toggleEmoji">
							<cl-icon name="cl-icon-emoji" :size="48" color="#666" />
						</view>

						<!-- 更多功能 -->
						<view class="tool-btn" @tap="showMoreTools">
							<cl-icon name="cl-icon-add-circle" :size="48" color="#666" />
						</view>

						<!-- 发送按钮 -->
						<view class="send-btn" v-if="inputText.trim()" @tap="sendTextMessage">
							<cl-icon name="cl-icon-send" :size="36" color="#fff" />
						</view>
					</view>

					<!-- 表情面板 -->
					<view v-if="showEmojiPanel" class="emoji-panel">
						<scroll-view scroll-y class="emoji-scroll">
							<view class="emoji-grid">
								<view 
									v-for="emoji in emojis" 
									:key="emoji"
									class="emoji-item"
									@tap="insertEmoji(emoji)"
								>
									<text class="emoji-text">{{ emoji }}</text>
								</view>
							</view>
						</scroll-view>
					</view>

					<!-- 更多工具面板 -->
					<view v-if="showToolsPanel" class="tools-panel">
						<view class="tools-grid">
							<view class="tool-item" @tap="chooseImage">
								<view class="tool-icon bg-blue">
									<cl-icon name="cl-icon-image" :size="48" color="#fff" />
								</view>
								<text class="tool-name">图片</text>
							</view>
							<view class="tool-item" @tap="showOrderList">
								<view class="tool-icon bg-orange">
									<cl-icon name="cl-icon-order" :size="48" color="#fff" />
								</view>
								<text class="tool-name">订单</text>
							</view>
							<view class="tool-item" @tap="showGoodsList">
								<view class="tool-icon bg-green">
									<cl-icon name="cl-icon-goods" :size="48" color="#fff" />
								</view>
								<text class="tool-name">商品</text>
							</view>
							<view class="tool-item" @tap="takePhoto">
								<view class="tool-icon bg-purple">
									<cl-icon name="cl-icon-camera" :size="48" color="#fff" />
								</view>
								<text class="tool-name">拍照</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 评价弹窗 -->
				<cl-popup
					v-model="showRating"
					direction="center"
					:close-on-click-modal="false"
					:border-radius="24"
				>
					<view class="rating-popup">
						<text class="rating-title">请对本次服务进行评价</text>
						<view class="rating-stars">
							<view 
								v-for="i in 5" 
								:key="i"
								class="star-item"
								@tap="setRating(i)"
							>
								<cl-icon 
									:name="i <= rating ? 'cl-icon-star-fill' : 'cl-icon-star'" 
									:size="60" 
									:color="i <= rating ? '#faad14' : '#ddd'"
								/>
							</view>
						</view>
						<cl-textarea
							v-model="ratingComment"
							placeholder="请输入您的评价..."
							:rows="3"
							:maxlength="200"
						/>
						<view class="rating-btns">
							<cl-button round @tap="closeRating">取消</cl-button>
							<cl-button round type="primary" @tap="submitRating">提交</cl-button>
						</view>
					</view>
				</cl-popup>
			</view>
		</cl-popup>

		<!-- 悬浮按钮 -->
		<view 
			v-if="!visible && showFloatBtn" 
			class="float-btn"
			@tap="open"
		>
			<image src="/static/icon/customer-service.png" class="float-icon" mode="aspectFill" />
			<view v-if="unreadCount > 0" class="unread-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, watch, nextTick } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useCool } from "/@/cool";
import { useUi } from "/$/cool-ui";

const { service, router } = useCool();
const ui = useUi();

// Props
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	showFloatBtn: {
		type: Boolean,
		default: true,
	},
});

// Emits
const emit = defineEmits(["update:modelValue"]);

// 客服信息
const currentAgent = ref({
	id: "agent1",
	name: "客服小优",
	avatar: "/static/icon/customer-service.png",
	status: "在线",
	online: true,
});

// 控制显示
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", val);
		if (!val && messages.value.length > 2) {
			// 关闭时显示评价
			setTimeout(() => {
				showRating.value = true;
			}, 300);
		}
	},
});

// 消息列表
const messages = ref<any[]>([
	{
		id: "sys1",
		type: "system",
		content: "客服小优为您服务",
		time: new Date(),
	},
	{
		id: "agent1",
		sender: "agent",
		type: "text",
		content: "您好！我是客服小优，很高兴为您服务。请问有什么可以帮助您的吗？",
		time: new Date(),
		avatar: "/static/icon/customer-service.png",
		status: "sent",
	},
]);

// 快捷回复
const quickReplies = ref([
	{ text: "如何查询订单？" },
	{ text: "如何申请退款？" },
	{ text: "商品什么时候发货？" },
	{ text: "如何修改收货地址？" },
	{ text: "优惠券使用说明" },
]);

// 表情列表
const emojis = ref([
	"😊", "👍", "🙏", "❤️", "😂", "🎉", "👋", "🤔",
	"😭", "🥰", "😘", "😍", "🤗", "😅", "😁", "👏",
	"🎁", "🌹", "💯", "🔥", "✨", "⭐", "💫", "💎",
]);

// 状态控制
const isFullScreen = ref(false);
const isVoiceMode = ref(false);
const showQuickReplies = ref(true);
const showEmojiPanel = ref(false);
const showToolsPanel = ref(false);
const showLoadMore = ref(false);
const showRating = ref(false);
const unreadCount = ref(2);

// 输入相关
const inputText = ref("");
const voiceText = ref("按住说话");
const scrollTop = ref(0);
const scrollIntoView = ref("");

// 评价相关
const rating = ref(0);
const ratingComment = ref("");

// 语音录制状态
let voiceRecorder: any = null;
let voiceStartTime = 0;

// 生成消息ID
function generateMsgId(): string {
	return `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}

// 打开客服
function open() {
	visible.value = true;
	unreadCount.value = 0;
	scrollToBottom();
}

// 返回
function goBack() {
	visible.value = false;
}

// 切换全屏
function toggleFullScreen() {
	isFullScreen.value = !isFullScreen.value;
}

// 显示更多操作
function showMore() {
	uni.showActionSheet({
		itemList: ["清空聊天记录", "结束会话", "投诉建议"],
		success: (res) => {
			switch (res.tapIndex) {
				case 0:
					clearMessages();
					break;
				case 1:
					endSession();
					break;
				case 2:
					router.push("/pages/user/feedback");
					break;
			}
		},
	});
}

// 加载更多历史消息
async function loadMoreMessages() {
	if (showLoadMore.value) return;
	
	showLoadMore.value = true;
	// 模拟加载
	setTimeout(() => {
		showLoadMore.value = false;
		ui.showToast("没有更多消息了");
	}, 1000);
}

// 判断是否显示时间
function shouldShowTime(index: number): boolean {
	if (index === 0) return true;
	const prevMsg = messages.value[index - 1];
	const currMsg = messages.value[index];
	const timeDiff = new Date(currMsg.time).getTime() - new Date(prevMsg.time).getTime();
	return timeDiff > 5 * 60 * 1000; // 5分钟
}

// 格式化时间
function formatTime(time: Date): string {
	const now = new Date();
	const msgTime = new Date(time);
	const diff = now.getTime() - msgTime.getTime();
	
	if (diff < 60 * 1000) {
		return "刚刚";
	} else if (diff < 60 * 60 * 1000) {
		return Math.floor(diff / (60 * 1000)) + "分钟前";
	} else if (diff < 24 * 60 * 60 * 1000) {
		return msgTime.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
	} else {
		return msgTime.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" });
	}
}

// 发送文本消息
function sendTextMessage() {
	if (!inputText.value.trim()) return;
	
	const msg = {
		id: generateMsgId(),
		sender: "user",
		type: "text",
		content: inputText.value,
		time: new Date(),
		status: "sending",
	};
	
	messages.value.push(msg);
	inputText.value = "";
	scrollToBottom();
	
	// 模拟发送成功
	setTimeout(() => {
		msg.status = "sent";
		// 模拟客服回复
		simulateAgentReply();
	}, 500);
}

// 发送快捷回复
function sendQuickReply(reply: any) {
	inputText.value = reply.text;
	sendTextMessage();
}

// 模拟客服回复
function simulateAgentReply() {
	// 显示打字中
	const typingMsg = {
		id: generateMsgId(),
		sender: "agent",
		type: "text",
		content: "",
		time: new Date(),
		avatar: currentAgent.value.avatar,
		isTyping: true,
	};
	messages.value.push(typingMsg);
	scrollToBottom();
	
	// 模拟回复
	setTimeout(() => {
		// 移除打字消息
		const index = messages.value.findIndex(m => m.id === typingMsg.id);
		if (index > -1) {
			messages.value.splice(index, 1);
		}
		
		// 添加真实回复
		const replies = [
			"好的，我已经收到您的消息，正在为您处理。",
			"感谢您的咨询，我会尽快为您解答。",
			"您的问题我已经了解，请稍等片刻。",
			"明白了，让我为您查询一下相关信息。",
		];
		
		messages.value.push({
			id: generateMsgId(),
			sender: "agent",
			type: "text",
			content: replies[Math.floor(Math.random() * replies.length)],
			time: new Date(),
			avatar: currentAgent.value.avatar,
			status: "sent",
		});
		
		scrollToBottom();
	}, 1500);
}

// 切换语音模式
function toggleVoice() {
	isVoiceMode.value = !isVoiceMode.value;
	if (isVoiceMode.value) {
		showEmojiPanel.value = false;
		showToolsPanel.value = false;
	}
}

// 切换表情面板
function toggleEmoji() {
	showEmojiPanel.value = !showEmojiPanel.value;
	if (showEmojiPanel.value) {
		showToolsPanel.value = false;
		isVoiceMode.value = false;
	}
}

// 显示更多工具
function showMoreTools() {
	showToolsPanel.value = !showToolsPanel.value;
	if (showToolsPanel.value) {
		showEmojiPanel.value = false;
		isVoiceMode.value = false;
	}
}

// 插入表情
function insertEmoji(emoji: string) {
	inputText.value += emoji;
}

// 选择图片
function chooseImage() {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			const tempPath = res.tempFilePaths[0];
			sendImageMessage(tempPath);
		},
	});
}

// 拍照
function takePhoto() {
	uni.chooseImage({
		count: 1,
		sourceType: ["camera"],
		success: (res) => {
			const tempPath = res.tempFilePaths[0];
			sendImageMessage(tempPath);
		},
	});
}

// 发送图片消息
function sendImageMessage(imagePath: string) {
	const msg = {
		id: generateMsgId(),
		sender: "user",
		type: "image",
		content: imagePath,
		time: new Date(),
		status: "sending",
	};
	
	messages.value.push(msg);
	scrollToBottom();
	showToolsPanel.value = false;
	
	// 模拟上传
	setTimeout(() => {
		msg.status = "sent";
		simulateAgentReply();
	}, 1000);
}

// 预览图片
function previewImage(url: string) {
	uni.previewImage({
		urls: [url],
		current: url,
	});
}

// 显示订单列表
function showOrderList() {
	// TODO: 实现订单选择
	ui.showToast("功能开发中");
}

// 显示商品列表
function showGoodsList() {
	// TODO: 实现商品选择
	ui.showToast("功能开发中");
}

// 跳转商品详情
function toGoodsDetail(goodsId: string) {
	router.push(`/pages/goods/detail?id=${goodsId}`);
}

// 跳转订单详情
function toOrderDetail(orderId: string) {
	router.push(`/pages/order/detail?id=${orderId}`);
}

// 开始录音
function startVoice() {
	voiceText.value = "松开发送";
	voiceStartTime = Date.now();
	uni.vibrateShort();
	
	// 开始录音
	voiceRecorder = uni.getRecorderManager();
	voiceRecorder.start({
		format: "mp3",
	});
}

// 结束录音
function endVoice() {
	voiceText.value = "按住说话";
	const duration = Date.now() - voiceStartTime;
	
	if (duration < 500) {
		ui.showToast("录音时间太短");
		return;
	}
	
	voiceRecorder.stop();
	voiceRecorder.onStop((res: any) => {
		// 发送语音消息
		ui.showToast("语音功能开发中");
	});
}

// 取消录音
function cancelVoice() {
	voiceText.value = "按住说话";
	voiceRecorder?.stop();
}

// 重发消息
function resendMessage(msg: any) {
	msg.status = "sending";
	setTimeout(() => {
		msg.status = "sent";
	}, 500);
}

// 清空聊天记录
function clearMessages() {
	uni.showModal({
		title: "提示",
		content: "确定要清空聊天记录吗？",
		success: (res) => {
			if (res.confirm) {
				messages.value = [
					{
						id: "sys1",
						type: "system",
						content: "聊天记录已清空",
						time: new Date(),
					},
				];
			}
		},
	});
}

// 结束会话
function endSession() {
	uni.showModal({
		title: "提示",
		content: "确定要结束本次会话吗？",
		success: (res) => {
			if (res.confirm) {
				visible.value = false;
			}
		},
	});
}

// 滚动到底部
function scrollToBottom() {
	nextTick(() => {
		if (messages.value.length > 0) {
			scrollIntoView.value = `msg-${messages.value[messages.value.length - 1].id}`;
		}
	});
}

// 输入框聚焦
function onInputFocus() {
	showQuickReplies.value = false;
}

// 输入框失焦
function onInputBlur() {
	setTimeout(() => {
		showQuickReplies.value = true;
	}, 200);
}

// 设置评分
function setRating(value: number) {
	rating.value = value;
}

// 关闭评价
function closeRating() {
	showRating.value = false;
	rating.value = 0;
	ratingComment.value = "";
}

// 提交评价
function submitRating() {
	if (rating.value === 0) {
		ui.showToast("请选择评分");
		return;
	}
	
	ui.showToast("感谢您的评价！");
	closeRating();
}

// 监听消息变化，自动滚动
watch(() => messages.value.length, () => {
	scrollToBottom();
});

onReady(() => {
	// 初始化
});
</script>

<style lang="scss" scoped>
.customer-service {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
}

// 头部样式
.service-header {
	display: flex;
	align-items: center;
	padding: 20rpx 32rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff4757);
	color: #fff;

	.header-left,
	.header-right {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.header-center {
		flex: 1;
		margin: 0 24rpx;

		.agent-info {
			display: flex;
			align-items: center;
			gap: 16rpx;

			.agent-avatar {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				border: 2rpx solid #fff;
			}

			.agent-details {
				.agent-name {
					font-size: 32rpx;
					font-weight: 600;
					display: block;
					margin-bottom: 4rpx;
				}

				.agent-status {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.status-dot {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background-color: #ccc;

						&.online {
							background-color: #52c41a;
						}
					}

					.status-text {
						font-size: 24rpx;
						opacity: 0.9;
					}
				}
			}
		}
	}

	.action-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s;

		&:active {
			background-color: rgba(255, 255, 255, 0.2);
		}
	}
}

// 消息区域
.message-area {
	flex: 1;
	background-color: #f5f5f5;
}

.load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx;
	gap: 12rpx;

	.load-text {
		font-size: 24rpx;
		color: #999;
	}
}

.message-list {
	padding: 24rpx;
}

.message-item {
	margin-bottom: 32rpx;

	&.system {
		.system-message {
			text-align: center;

			.system-text {
				display: inline-block;
				padding: 8rpx 24rpx;
				background-color: rgba(0, 0, 0, 0.05);
				border-radius: 24rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.message-time {
		text-align: center;
		margin-bottom: 16rpx;

		.time-text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.message-content {
		display: flex;
		align-items: flex-end;
		gap: 16rpx;

		.message-avatar {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.message-body {
			max-width: 70%;
			padding: 20rpx 24rpx;
			border-radius: 16rpx;
			background-color: #fff;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				top: 20rpx;
				left: -12rpx;
				border: 8rpx solid transparent;
				border-right-color: #fff;
			}

			&.typing {
				padding: 24rpx 32rpx;
			}

			.typing-indicator {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.typing-dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: #999;
					animation: typing-bounce 1.4s infinite;

					&:nth-child(2) {
						animation-delay: 0.2s;
					}

					&:nth-child(3) {
						animation-delay: 0.4s;
					}
				}
			}

			.message-text {
				font-size: 30rpx;
				color: #333;
				line-height: 1.6;
				word-break: break-all;
			}

			.message-image {
				max-width: 400rpx;
				border-radius: 12rpx;
			}

			.goods-card,
			.order-card {
				background-color: #f8f8f8;
				border-radius: 12rpx;
				padding: 16rpx;
				min-width: 400rpx;
			}

			.goods-card {
				display: flex;
				gap: 16rpx;

				.goods-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					flex-shrink: 0;
				}

				.goods-info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.goods-name {
						font-size: 28rpx;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.goods-price {
						font-size: 32rpx;
						color: #ff4757;
						font-weight: 600;
					}
				}
			}
		}

		.message-status {
			margin-left: 8rpx;
		}
	}

	&.self {
		.message-content {
			flex-direction: row-reverse;

			.message-body {
				background-color: #ff4757;

				&::before {
					left: auto;
					right: -12rpx;
					border-right-color: transparent;
					border-left-color: #ff4757;
				}

				.message-text {
					color: #fff;
				}
			}
		}
	}
}

// 快捷回复
.quick-replies {
	background-color: #fff;
	border-top: 1rpx solid #eee;
	padding: 16rpx 0;

	.reply-list {
		display: flex;
		padding: 0 24rpx;
		gap: 16rpx;

		.reply-item {
			flex-shrink: 0;
			padding: 12rpx 24rpx;
			background-color: #f5f5f5;
			border-radius: 32rpx;
			border: 2rpx solid #e0e0e0;
			transition: all 0.3s;

			&:active {
				background-color: #ff4757;
				border-color: #ff4757;

				.reply-text {
					color: #fff;
				}
			}

			.reply-text {
				font-size: 26rpx;
				color: #666;
			}
		}
	}
}

// 输入区域
.input-area {
	background-color: #fff;
	border-top: 1rpx solid #eee;

	.input-toolbar {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		gap: 16rpx;

		.tool-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 64rpx;
			height: 64rpx;
			transition: all 0.3s;

			&:active {
				opacity: 0.6;
			}
		}

		.input-wrapper {
			flex: 1;

			:deep(.cl-input) {
				background-color: #f5f5f5;
				border-radius: 32rpx;
				padding: 0 24rpx;
				height: 64rpx;
			}
		}

		.voice-wrapper {
			flex: 1;

			.voice-btn {
				background-color: #f5f5f5;
				border-radius: 32rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s;

				&:active {
					background-color: #e0e0e0;
				}

				.voice-text {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.send-btn {
			width: 64rpx;
			height: 64rpx;
			background: linear-gradient(135deg, #ff6b6b, #ff4757);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;

			&:active {
				transform: scale(0.9);
			}
		}
	}

	.emoji-panel {
		height: 400rpx;
		background-color: #f5f5f5;

		.emoji-scroll {
			height: 100%;
			padding: 24rpx;

			.emoji-grid {
				display: grid;
				grid-template-columns: repeat(8, 1fr);
				gap: 16rpx;

				.emoji-item {
					aspect-ratio: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					border-radius: 12rpx;
					transition: all 0.3s;

					&:active {
						background-color: #f0f0f0;
						transform: scale(0.9);
					}

					.emoji-text {
						font-size: 48rpx;
					}
				}
			}
		}
	}

	.tools-panel {
		padding: 32rpx;
		background-color: #f5f5f5;

		.tools-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 32rpx;

			.tool-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;

				.tool-icon {
					width: 96rpx;
					height: 96rpx;
					border-radius: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.3s;

					&.bg-blue {
						background-color: #1890ff;
					}

					&.bg-orange {
						background-color: #fa8c16;
					}

					&.bg-green {
						background-color: #52c41a;
					}

					&.bg-purple {
						background-color: #722ed1;
					}

					&:active {
						transform: scale(0.9);
					}
				}

				.tool-name {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
}

// 评价弹窗
.rating-popup {
	padding: 48rpx;
	text-align: center;

	.rating-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		display: block;
		margin-bottom: 32rpx;
	}

	.rating-stars {
		display: flex;
		justify-content: center;
		gap: 24rpx;
		margin-bottom: 32rpx;

		.star-item {
			transition: all 0.3s;

			&:active {
				transform: scale(0.9);
			}
		}
	}

	:deep(.cl-textarea) {
		margin-bottom: 32rpx;
	}

	.rating-btns {
		display: flex;
		gap: 24rpx;

		.cl-button {
			flex: 1;
		}
	}
}

// 悬浮按钮
.float-btn {
	position: fixed;
	right: 32rpx;
	bottom: 200rpx;
	width: 96rpx;
	height: 96rpx;
	background: linear-gradient(135deg, #ff6b6b, #ff4757);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 71, 87, 0.3);
	transition: all 0.3s;
	z-index: 999;

	&:active {
		transform: scale(0.9);
	}

	.float-icon {
		width: 56rpx;
		height: 56rpx;
	}

	.unread-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		min-width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		padding: 0 8rpx;
		background-color: #ff4757;
		color: #fff;
		font-size: 20rpx;
		font-weight: 600;
		border-radius: 16rpx;
		border: 2rpx solid #fff;
	}
}

// 动画
@keyframes typing-bounce {
	0%, 60%, 100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-10rpx);
	}
}
</style>